﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="ShoppingTemplate.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ShoppingTemplate"
    xmlns:data="using:ShoppingTemplate.Data"
    xmlns:common="using:ShoppingTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"
            d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>
    <Page.TopAppBar>
        <AppBar x:Name="topappBar" Padding="5,0,0,0">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <!--<Button x:Name="btnHome" HorizontalAlignment="Left" Style="{StaticResource HomeAppBarButtonStyle}" IsEnabled="False"/>-->
                    <Button x:Name="btnHome" HorizontalAlignment="Left" Padding="0" Background="Transparent" Margin="15,0,20,0" Click="btnHome_Click">
                        <Button.Content>
                            <Image Source="/Assets/Images/Home.png" Height="60" Width="60"/>
                        </Button.Content>
                    </Button>
                    <Button HorizontalAlignment="Left" Padding="0" Background="Transparent" Margin="0,0,20,0">
                        <Button.Content>
                            <Image Source="/Assets/Images/section1.png" Height="60" Width="60"/>
                        </Button.Content>
                    </Button>
                    <Button HorizontalAlignment="Left" Padding="0" Background="Transparent" Margin="0,0,20,0">
                        <Button.Content>
                            <Image Source="/Assets/Images/section2.png" Height="60" Width="60"/>
                        </Button.Content>
                    </Button>
                    <Button HorizontalAlignment="Left" Padding="0" Background="Transparent" Margin="0,0,20,0">
                        <Button.Content>
                            <Image Source="/Assets/Images/section3.png" Height="60" Width="60"/>
                        </Button.Content>
                    </Button>
                </StackPanel>

                <StackPanel HorizontalAlignment="Right">
                    <Button HorizontalAlignment="Left" Padding="0" Background="Transparent" Margin="0,0,20,0">
                        <Button.Content>
                            <Image Source="/Assets/Images/ShoppingCart.png" Height="80" Width="100"/>
                        </Button.Content>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Assets/Images/Bg1.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Foreground="#FF999364" 
                       Text="Page header"/>
            <TextBlock x:Name="subTitle" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Product XYZ-123" VerticalAlignment="Bottom" Grid.Column="1" FontFamily="Segoe UI" FontSize="24" FontWeight="Light" Foreground="#FF7B7A78" Margin="0,0,0,-5"/>
            <Image x:Name="imgLogo" Margin="0,0,10,0" Grid.Column="1" HorizontalAlignment="Right" Width="234" Height="100" VerticalAlignment="Center" 
                   Source="Assets/AppLogo.png"/>
        </Grid>
        <ScrollViewer x:Name="scrMain" Margin="0" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
                      ZoomMode="Disabled" VerticalScrollMode="Disabled">
            <StackPanel x:Name="spMain" Margin="116,40,0,0" Orientation="Horizontal">
                <Grid Height="470" Width="350" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="16"/>
                        <RowDefinition Height="26"/>
                        <RowDefinition Height="270"/>
                        <RowDefinition Height="2"/>
                        <RowDefinition Height="64"/>
                        <RowDefinition Height="2"/>
                        <RowDefinition Height="90"/>
                    </Grid.RowDefinitions>
                    <Rectangle Fill="#FFF4F4F5" Margin="0" Grid.RowSpan="3"/>
                    <Grid Margin="12,0" Grid.Row="1">
                        <Image HorizontalAlignment="Left" Width="109" VerticalAlignment="Center" Height="22" Source="Assets/Images/Rating Star.png"/>
                        <Image HorizontalAlignment="Right" Width="79" VerticalAlignment="Center" Height="18" Source="Assets/Images/AmazonLogo.png"/>
                    </Grid>
                    <Image HorizontalAlignment="Center" Margin="0" Width="248" Grid.Row="2" VerticalAlignment="Center" Height="226" 
                           Source="Assets/Images/productBigGrey.png"/>
                    <ScrollViewer Grid.Row="4" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" ZoomMode="Disabled">
                        <StackPanel Margin="0"  Orientation="Horizontal">
                            <GridViewItem Padding="0">
                                <Image x:Name="img1" Width="64" Height="64" Source="Assets/Images/previewSmallGrey.png" />
                            </GridViewItem>
                            <GridViewItem Padding="0">
                                <Image x:Name="img2" Width="64" Height="64" Source="Assets/Images/previewSmallGrey.png"/>
                            </GridViewItem>
                            <GridViewItem Padding="0">
                                <Image x:Name="img3" Width="64" Height="64" Source="Assets/Images/previewSmallGrey.png" />
                            </GridViewItem>
                            <GridViewItem Padding="0">
                                <Image x:Name="img4" Width="64" Height="64" Source="Assets/Images/previewSmallGrey.png"/>
                            </GridViewItem>
                            <GridViewItem Padding="0">
                                <Image x:Name="img5" Width="64" Height="64" Source="Assets/Images/previewSmallGrey.png"/>
                            </GridViewItem>
                            <GridViewItem Padding="0">
                                <Image x:Name="img6" Width="64" Source="Assets/Images/previewSmallGrey.png" Height="64"/>
                            </GridViewItem>
                        </StackPanel>
                    </ScrollViewer>
                    <Grid Margin="0" Grid.Row="6" Background="#FF00C0FF">
                        <StackPanel Margin="12,0" Orientation="Vertical" d:LayoutOverrides="Height" HorizontalAlignment="Right" VerticalAlignment="Center">
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="INR" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="28" Foreground="#FFC8C8C8"/>
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="xx,xxx" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="42" FontWeight="Bold" Margin="0,-15,0,0"  />
                        </StackPanel>
                    </Grid>
                </Grid>
                <StackPanel Width="350" Height="470" VerticalAlignment="Top" Background="White" Margin="12,0,0,0">
                    <Grid Height="60" Margin="20,0">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Technical Details" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="27" Foreground="#FF00C0FF"/>
                    </Grid>
                    <StackPanel Margin="0,20">
                        <TextBlock TextWrapping="Wrap" Text=" Your technical details goes here. Sample follows.." FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <!--<StackPanel Orientation="Horizontal" Margin="20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Technical Detail 1" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Technical Detail 2" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Technical Detail 3" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Technical Detail 4" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Technical Detail 5" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>-->
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Pellentesque elementum ultricies " FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Nulla enim lacus" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Nulla bibendum" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Pellentesque eget neque" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Suspendisse cursus dolor" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Praesent bibendum malesuada" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Sed sem lorem" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Fusce congue tincidunt rhoncus" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="20,7,20,0">
                        <Image Height="5" Width="7" Source="Assets/Images/Arrow.png"/>
                        <TextBlock TextWrapping="Wrap" Text="Aenean molestie imperdiet" FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                    </StackPanel>
                </StackPanel>
                <StackPanel>
                    <StackPanel Height="470" Width="420" Margin="12,0,0,0" Background="White" VerticalAlignment="Top">
                        <Grid Height="60" Margin="20,0,90,0">
                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Product Details" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="27" Foreground="#FF00C0FF"/>
                        </Grid>
                        <StackPanel Margin="0,20">
                            <TextBlock TextWrapping="Wrap" Text="Your product details goes here. Sample as follows.." FontFamily="Segoe UI" FontSize="15" Foreground="Black" Margin="10,0,0,0"/>
                        </StackPanel>
                        <StackPanel Margin="20,0,20,15">
                            <TextBlock TextWrapping="Wrap" Text="Product Dimensions:" FontFamily="Segoe UI" FontSize="15" Foreground="Black" FontWeight="SemiBold"/>
                            <TextBlock TextWrapping="Wrap" Text="30.7 x 4.4 x 19.8 inches ; 19.9 pounds" FontFamily="Segoe UI" FontSize="15" FontWeight="Light" Foreground="#FF6B6B6B" />
                        </StackPanel>
                        <StackPanel Margin="20,0,20,15">
                            <TextBlock TextWrapping="Wrap" Text="Shipping Weight:" FontFamily="Segoe UI" FontSize="15" Foreground="Black" FontWeight="SemiBold"/>
                            <TextBlock TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="15" FontWeight="Light" Foreground="#FF727272" >
        					<Run Text="27 pounds "/>
        					<!--<Run Text="("/>
        					<Run Foreground="#FFDC5555" FontWeight="SemiBold" Text="View shipping rates and policies"/>
        					<Run Text=")"/>-->
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Margin="20,0,20,15">
                            <TextBlock TextWrapping="Wrap" Text="Shipping:" FontFamily="Segoe UI" FontSize="15" Foreground="Black" FontWeight="SemiBold"/>
                            <TextBlock TextWrapping="Wrap" Text="Currently, item can be shipped only within the U.S." FontFamily="Segoe UI" FontSize="15" FontWeight="Light" Foreground="#FF6B6B6B" />
                        </StackPanel>
                    </StackPanel>
                    <Button HorizontalAlignment="Right" Margin="0,20" Padding="2">
                        <Image Source="/Assets/Images/addtoCartBtn.png" />
                    </Button>
                </StackPanel>
            </StackPanel>

        </ScrollViewer>

        <Grid x:Name="grdSnapView" Visibility="Collapsed" Grid.Row="1">
            <TextBlock FontSize="30" Text="Please Switch Fullscreen to View Content" TextWrapping="Wrap" TextAlignment="Center"
                       VerticalAlignment="Center" Margin="0,0,0,140"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup>
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="spMain" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,40,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="subTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imgLogo" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrMain" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grdSnapView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
